<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>宠物</title>
    <link rel="shortcut icon" href="/assets/images/favourite_icon.svg">

    <!-- fraimwork - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/bootstrap.min.css">

    <!-- icon font - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/fontawesome.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/stroke-gap-icons.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/icofont.css">

    <!-- animation - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/animate.css">

    <!-- carousel - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="/assets/css/slick-theme.css">

    <!-- popup - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/magnific-popup.css">

    <!-- jquery-ui - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/jquery-ui.css">

    <!-- select option - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/nice-select.css">

    <!-- custom - css include -->
    <link rel="stylesheet" type="text/css" href="/assets/css/style.css">

</head>

<body>


<header class="header_section" style="padding-bottom: 0px" th:fragment="common_header" >
    <div class="header_middle">
        <div class="container">
            <div class="row align-items-center">
                <div class="col col-lg-3 col-5">
                    <div class="brand_logo">
                        <a class="brand_link" href="/index">
                            <img src="/img/logo.png" alt="Getyootech - Gadgets Ecommerce Site Template">
                        </a>
                    </div>
                </div>
                <div class="col col-lg-6 col-2">
                    <nav class="main_menu navbar navbar-expand-lg">
                        <div class="main_menu_inner collapse navbar-collapse justify-content-center" id="main_menu_dropdown">
                            <ul class="main_menu_list ul_li">
                                <li><a href="/index">主页</a></li>
                                <li><a href="/shop">商城</a></li>
                                <li><a href="/adopt">宠物领养</a></li>
                                <li><a href="/reservation">预约</a></li>
                                <li><a href="/cart">购物车</a></li>
                                <li><a href="/admin/index">个人中心</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>

                <div class="col col-lg-3 col-5">
                    <ul class="header_icons_group ul_li_right">
                        <li>
                            <button class="mobile_menu_btn navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_menu_dropdown" aria-controls="main_menu_dropdown" aria-expanded="false" aria-label="Toggle navigation">
                                <i class="fal fa-bars"></i>
                            </button>
                        </li>
<!--                        <li><a href="contact.html"><i class="fa-regular fa-location-dot"></i></a></li>-->
<!--                        <li><a href="compare.html"><i class="fa-solid fa-arrows-rotate"></i></a></li>-->
<!--                        <li>-->
<!--                            <a href="wishlist.html">-->
<!--                                <i class="fa-regular fa-heart"></i>-->
<!--                                <small class="wishlist_counter">5</small>-->
<!--                            </a>-->
<!--                        </li>-->
<!--                        <li><a href="account.html"><i class="fa-regular fa-user"></i></a></li>-->
                    </ul>
                </div>
            </div>
        </div>
    </div>

</header>




<script src="//assets/js/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="//assets/js/bootstrap.bundle.js"></script>
<!-- owl carousel js -->
<script src="//assets/js/owl.carousel.min.js"></script>
<!-- wow.js -->
<script src="//assets/js/wow.min.js"></script>
<!-- waypoints js  -->
<script src="//assets/js/waypoints.min.js"></script>
<!-- magnific-popup js  -->
<script src="//assets/js/jquery.magnific-popup.min.js"></script>
<!-- meanmenu js -->
<script src="//assets/js/jquery.meanmenu.js"></script>
<!-- counterup js  -->
<script src="//assets/js/jquery.counterup.min.js"></script>
<!-- Custom js -->
<script src="//assets/js/clock.js"></script>
<script src="//assets/js/video.js"></script>
<script src="//assets/js/custom.js"></script>
</body>